<template>
	<view class="callFask_container">
		<u-navbar title="确定用车" safeAreaInsetTop @leftClick="upOnelevel" :autoBack="true">
		</u-navbar>
		<!-- 地图 -->
		<view class="map_navigation">
			<!-- 标记点 ：  markers -->
			<map id="navMap" class="map" enable-traffic="true" show-location="true" :latitude="latitude"
				:longitude="longitude" :markers="initialPoint" :polyline="polyline">
			</map>
		</view>
		<!-- 全程多少公里 -->
		<u-row customStyle="margin-bottom: 10px;margin-top: 10px;">
			<u-col span="12">
				<view class="tips">
					全程<text class="minuterText">{{kilometre}}km</text>,大约需要<text
						class="minuterText">{{minuter}}分钟</text>
				</view>
			</u-col>
		</u-row>
		<!-- 出租车付款方式选择 -->
		<view class="payType">
			<u-radio-group v-model="radiovalue1" placement="column">
				<u-radio shape="square" :customStyle="{marginBottom: '28px'}" v-for="(item, index) in radiolist1" :key="index"
					:label="item.name + ' 预估' + price + '元'" :name="item.name" @change="radioChange">
				</u-radio>
			</u-radio-group>
		</view>
		<!-- 确认呼叫按钮 -->
		<view class="call">
			<button class="taxiBtn" @click="waitCar">确认呼叫出租车</button>
		</view>
		<!-- 底部隔开区域 -->
		<view class="safe-bottom">

		</view>
	</view>
</template>

<script>
	import amap from "../../common/amap-wx.130.js"
	import {
		conversion
	} from '@/common/utils.js'
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				navMap: '', // 初始实例化地图对象
				amapPlugin: null, // 插件效果
				gaodeKey: "4412f1a1546136b8476c2c1011cbbad9", //  高德地图申请的key
				latitude: '', // 纬度
				longitude: '', // 经度
				//  初始点(用户的初始位置)
				initialPoint: [],
				points: [], // 缩放视野---记录起点和终点
				polyline: [], //路线的规划
				kilometre: '', // 路线多少公里
				minuter: '', //需要的时间
				price: '', //预计金额
				value: '1', //单选框
				radiolist1: [{
						name: '微信支付',
						disabled: false
					},
					{
				 	name: '计时打表',
						disabled: false
					}
				],
				radiovalue1: '微信支付',
				userTable:'',  // 存储用户信息
				openid:'', // 储存openid
			}
		},
		onLoad(option) {
			this.kilometre = option.distance
			this.minuter = option.minute
			this.price = option.payMoney

			this.initialPoint = this.startEnd
			this.polyline = this.routePath
			
			
			this.getInitialAddress()

			// 高德地图sdk的获取
			this.amapPlugin = new amap.AMapWX({
				key: this.gaodeKey
			})
			

			// 实例化地图对象
			this.navMap = uni.createMapContext("navMap", this)
			this.getLocation()
			
			
			// 缩放地图
			this.navMap.includePoints({
				padding: [90],
				points: this.initialAddress.route
			})
			
			// 获取用户ID
			this.userTable = uni.getStorageSync('userTable')
			console.log(this.userTable,107);
			
		},
		computed: {
			...mapState('userLocation', ['initPath', 'startPath', 'endPath', 'startEnd', 'routePath', 'theFinal']),
		},
		methods: {
			...mapMutations('userInfo', ['setOrderInfo']),
			// 接到司机接单的消息
			getmsg() {
				this.socket.on('callUser', (message) => {
					// 收到服务器推送的消息
					console.log('收到服务器消息：', message, 140)
					this.setOrderInfo(message)
					this.orderState = true
				})
			},
			// 获取当前位置
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude)
						console.log('当前位置的纬度：' + res.latitude)
						that.latitude = res.latitude
						that.longitude = res.longitude
					},
					fail(err) {
						console.log(err, '报错了')
					}
				});
			},
			// 确定路线
			determinePath() {
				// 起点
				if (this.startPath) {
					this.addressName = this.startPath.name
					this.addressDesc = this.startPath.district + this.startPath.address
					this.initialPoint[0] = {
						id: 0,
						longitude: this.startPath.longitude,
						latitude: this.startPath.latitude,
						iconPath: "../../static/location1.png",
						width: 30,
						height: 30
					}
					this.points[0] = {
						longitude: this.startPath.longitude,
						latitude: this.startPath.latitude,
					}
				}
				// 目的地
				if (this.endPath) {
					this.addressEnd = this.endPath.name
					this.addressEndD = this.endPath.district + this.endPath.address
					this.initialPoint[1] = {
						id: 1,
						longitude: this.endPath.longitude,
						latitude: this.endPath.latitude,
						iconPath: "../../static/终点.png",
						width: 40,
						height: 40
					}
					this.points[1] = {
						longitude: this.endPath.longitude,
						latitude: this.endPath.latitude
					}
				}
			},
			// 开始叫车
			startCall() {
				console.log(this.userTable.userId,181);
				let that = this
				let origin = ''
				let province = ''
				let city = ''
				let departure = ''
				// 自己定位
				if (this.initPath) {
					origin = this.initPath.name
					province = this.initPath.province
					city = this.initPath.city
					departure = this.initPath.province + this.initPath.district
				}
				// 手动选择的页面
				if (this.startPath) {
					origin = this.startPath.name
					province = this.startPath.district.split('省')[0] + '省'
					city = this.startPath.city
					departure = this.startPath.address
				}
				this.obj = {
					// 用户ID
					socketID:that.userTable.userId,
					// 出发地
					origin: origin,
					// 目的地
					bourn: this.endPath.name,
					// 省
					province: province,
					// 市
					city: city,
					//价格
					price: this.price,
					// 目的地详细
					destination: this.endPath.district + this.endPath.name,
					// 出发地详细
					departure: departure,
					// 叫车类型
					carType: 28,
					// 路线
					route: JSON.stringify(this.initialAddress.route),
					// 用户，出发地的经纬度
					originLatLong: JSON.stringify(this.initialAddress.route[0])
				}
				console.log(this.obj, 160)
				// 当前时间戳
				let time = conversion()
				let nowTime = new Date(time.nowTime).getTime()
				this.obj.nowTime = nowTime
				// 用户登录唯一标识---发送者
				// 订单状态
				this.obj.state = 0
				// 发送请求
				this.$http('/userTaxiOrder', this.obj, "POST").then(res => {
					if (res.code == 200) {
						this.ordernum = res.data.ordernum
						uni.navigateTo({
							url: '/subpkg/callFaskwait/callFaskwait'
						})
						// 重复发送订单
						this.repetitionTime = setInterval(() => {
							// 发送 socket
							this.socket.emit('callCar', this.obj)
						}, 1000)
					} else {
						uni.$showMsg('叫车失败', 'error')
						return
					}
				})
			},
			upOnelevel() {
				uni.navigateBack()
			},
			radioGroupChange(e) {
				console.log(e);
			},
			goDetails(title) {
				console.log(title)
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
				this.radiovalue1 = n
			},
			// 跳转到等待接送页面
			waitCar(){
				this.startCall()
			},
			// 获取出租车的地址信息
			getInitialAddress(){
				this.initialAddress = JSON.parse(uni.getStorageSync('initialAddress'))
				
			}
		},
		watch: {
			orderState(newValue) {
				if (newValue) {
					// 提示用户
					uni.showToast({
						title: '叫车成功',
						duration: 2000,
					})
					// 同步提示跳转
					setTimeout(() => {
						uni.navigateTo({
							url: '/subpkg/userWaitDriver/userWaitDriver'
						})
					}, 2000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map_navigation {
		margin-top: 10px;

		.map {
			height: 400px;
			width: 100%;
		}
	}

	.tips {
		width: 100%;
		line-height: 100rpx;
		text-align: center;
		font-size: 35rpx;

		.minuterText {
			color: #FFAA4F;
		}
	}

	.money {
		line-height: 80rpx;
		font-size: 38rpx;
		text-align: center;
		
	}

	.radio_user {
		margin-top: 10rpx;
		display: flex;
		height: 100rpx;
		align-items: center;
		width: 100%;

		/deep/.u-radio {
			display: flex;
			flex-direction: row-reverse;
			margin-left: 10px !important;
		}

		.tipsView {
			width: 100%;
			font-size: 33rpx;
			line-height: 50rpx;
		}

		.green {
			color: #8CCFB2;
		}


	}

	.safe-bottom {
		height: 50rpx;
	}

	.payType {
		width: 95%;
		height: 200rpx;
		margin: 10px auto;
	}
	
	.call{
		width: 90%;
		height: 200rpx;
		margin: auto;
	}
	
	.taxiBtn{
		font-size: 18px;
		width: 100%;
		background-color: #2F396E;
		background-color:liner;
		color: white;
		border-radius: 10px;
	}
</style>
